<template>
  <div>
    <h4>第九题</h4>
    <div class="colorBox" :style="{ background: `rgb(${bgColor1},${bgColor2},${bgColor3})` }"></div>
    <div>
      R:<input
        type="range"
        min="0"
        max="250"
        
        v-model="bgColor1"
      />
      <span>{{ bgColor1 }}</span> G:<input
        type="range"
        min="0"
        max="250"
        v-model="bgColor2"
      /><span>{{ bgColor2 }}</span> B:<input
        type="range"
        min="0"
        max="250"
        v-model="bgColor3"
      />
      <span>{{ bgColor3 }}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bgColor1: 0,
      bgColor2: 0,
      bgColor3: 0,
    };
  }
};
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
